<template>
  <div class="wrapper" ref="wrapper">
    <!-- scroll要有插槽 -->
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import Bscroll from "better-scroll";
export default {
  props: {
    scrolloption: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      scroll: null
      // message:100
    };
  },
  methods: {
    
    scrollTo(x, y, time = 600) {
      // 如果判断比较长，就用if(){}
      this.scroll && this.scroll.scrollTo && this.scroll.scrollTo(x, y, time);
    },
    // 完成加载更多
    finishPullUp() {
      this.scroll && this.scroll.finishPullUp && this.scroll.finishPullUp();
    },
    refresh() {
      this.scroll && this.scroll.refresh && this.scroll.refresh();
    }
  },
  components: {},
  computed: {},
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）可以访问props data
  created() {
    // console.log(this.scrolloption);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）

  mounted() {
    // this.scroll = new Bscroll(this.$refs.wrapper, {
    //   probeType: this.scrolloption.probeType, //探测类型: 2实时侦查滚动位置，惯性滚动不侦查 3实时侦查，惯性滚动也侦查
    //   click: true, // better-scroll 默认false会阻止浏览器的原生 click 事件
    //   pullUpLoad: this.scrolloption.pullUpLoad //pullUpLoad做上拉加载功能要设为true(手指上滑)，默认为 false 配合pullingUp事件
    // }); //div元素dom对象 这是唯一的。不用找元素

    this.scroll = new Bscroll(this.$refs.wrapper, this.scrolloption);
    // 监听滚动的位置 把scroll组件postion传出去
    this.scroll.on("scroll", position => {
      this.$emit("scroll", position);
    });
    //下拉加载更多 到达底部自动触发回电函数
    this.scroll.on("pullingUp", () => {
      // console.log('上拉加载更多')
      this.$emit("pullingUp");
    });
    // 
  },
  updated() {}, //生命周期 - 更新之后
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.wrapper {
  // height: calc(100% - 44px - 49px);
}
</style>